<template>
    <div class="app-container">

        <el-card shadow="always">
            <div>
                <div class="flex justify-between align-center">
                    <div>
                        <p><span style="color:#fd2f2f;">当前美国时区:(-8)：{{ us_time | parseTime('y-m-d h:i:s 星期a') }}</span>
                        <!-- <span style="color:#fd2f2f;">,当前欧洲时区:(+2)：{{ eur_time | parseTime('y-m-d h:i:s 星期a') }}</span> -->
                        </p>
                    </div>
                </div>
            </div>
        </el-card>
        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading" >
            <el-divider class="mt5 mb5" />
            <el-row>
                    <template>
                        <el-table
                        :data="arr_summary"
                        border
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        style="width: 100%">
                                <el-table-column
                                    prop="profit"
                                    label="预估毛利$">
                                </el-table-column>
                                <el-table-column
                                    prop="total_amounts"
                                    label="总销售额$">
                                </el-table-column>
                        </el-table>
                    </template>
            </el-row>
        </el-card>

        <el-card shadow="always" body-style="padding:0 20px;" v-loading="loading" >
            <el-divider class="mt5 mb5" />
            <el-row>
                    <div>店铺业绩</div>
                    <el-divider class="mt5 mb5" />
                    <template>
                        <el-table
                        :data="shopify_sales"
                        border
                        :summary-method="getSummaries"
                        show-summary
                        :row-class-name="tableRowClassName"
                        :cell-style="columnStyle"
                        :default-sort = "{prop: 'date', order: 'descending'}"
                        style="width: 100%">
                        <el-table-column
                                    prop="site_name"
                                    label="店铺">
                                </el-table-column>
                                <el-table-column
                                    prop="count"
                                    sortable
                                    label="订单数">
                                </el-table-column>
                                <el-table-column
                                    prop="outbound"
                                    sortable
                                    label="件数">
                                </el-table-column>
                                <el-table-column
                                    prop="total_amounts"
                                    label="面板销售额$"
                                    sortable>
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="total_amounts_actual"
                                    label="实际销售额$"
                                    sortable>
                                </el-table-column> -->
                                <el-table-column
                                    prop="advertisement"
                                    label="面板广告费$"
                                    sortable>
                                </el-table-column>
                                <el-table-column
                                    prop="roi"
                                    label="ROI"
                                    sortable>
                                </el-table-column>
                                <el-table-column
                                    prop="profit"
                                    label="实际盈利$"
                                    sortable>
                                </el-table-column>
                                <el-table-column
                                    prop="shipping_fee_platform_discount"
                                    sortable
                                    label="Taxes$">
                                </el-table-column>
                                <el-table-column
                                    prop="purchase"
                                    label="采购成本$"
                                    sortable>
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="logistics"
                                    label="物流费$"
                                    sortable>
                                </el-table-column> -->
                                <el-table-column
                                    prop="cephalic_process"
                                    label="头程$"
                                    sortable>
                                </el-table-column>
                                <el-table-column
                                    prop="storage_fee"
                                    sortable
                                    label="入库费">
                                </el-table-column>
                                <el-table-column
                                    prop="outbound_fee"
                                    sortable
                                    label="出库费">
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="overseas_warehouse_delivery_fee"
                                    sortable
                                    label="海外仓配送费">
                                </el-table-column> -->
                                <el-table-column
                                    prop="material_packaging_fee"
                                    sortable
                                    label="海外仓配送费">
                                </el-table-column>
                                <el-table-column
                                    prop="packaging_fee"
                                    sortable
                                    label="打包费">
                                </el-table-column>
                                <el-table-column
                                    prop="material_packaging_order"
                                    sortable
                                    label="(>=2件)单量">
                                </el-table-column>
                                <!-- <el-table-column
                                    prop="total_amount"
                                    sortable
                                    label="销售额$">
                                </el-table-column>
                                <el-table-column
                                    prop="platform_discount"
                                    sortable
                                    label="平台折扣$">
                                </el-table-column>
                                <el-table-column
                                    prop="tax"
                                    sortable
                                    label="税费$">
                                </el-table-column>
                                <el-table-column
                                    prop="original_total_product_price"
                                    label="产品金额$">
                                </el-table-column> -->
                                <el-table-column label="操作" align="left">
                                    <template slot-scope="scope">
                                        <el-button class="btn-mar" size="mini" type="primary" @click="handleEdit(scope.row)">详情</el-button>
                                    </template>
                                </el-table-column>
                        </el-table>
                    </template>
            </el-row>
        </el-card>
        <!-- 编辑弹窗 -->
        <el-dialog :title="!disabled ? '编辑' : '详情'" :visible="editOpen"  :before-close="beforeClose" destroy-on-close>
            <EditForm ref="editForm" :findFormData="findFormData"  :disabled="disabled" @submitForm="submitForm" :editFormParams="editFormParams" @editFormCancel="beforeClose" />
        </el-dialog>

    </div>
</template>

<script>
import { curdMixin } from '@/mixins/curdMixin'
import EditForm from './EditFormCom'
import { mapGetters } from 'vuex'
export default {
    name: 'dashboardnew',
    mixins: [curdMixin],
    components: { EditForm},
    data() {
        return {
            loading: false,
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7 - 3600 * 1000 * 16);
                    end.setTime(end.getTime() - 3600 * 1000 * 16);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30 - 3600 * 1000 * 16);
                    end.setTime(end.getTime() - 3600 * 1000 * 16);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90 - 3600 * 1000 * 16);
                    end.setTime(end.getTime() - 3600 * 1000 * 16);
                    picker.$emit('pick', [start, end]);
                    }
                }]
            },
            saleSearch: {
                dateType: 1,
                datetime: '',
            },
            time: 0,
            start_time: new Date(),
            end_time: new Date(),
            us_time: 0,
            eur_time: 0,
            // 接口地址
            api: {
                edit: `/admin/datapanel/dashboard_new_edit`,
            },
            editFormParams: {
            },
            day_changes:0,
            sales_handle:'',
            paid_handle:'',
            gross_profit_handle:'',

            post_start_time:'',
            post_end_time:'',

            arr_summary:[],
            shopify_sales:[
                {
                    advertisement: '0',
                    purchase: '0',
                    logistics: '0',
                    outbound: '0',
                    material_packaging: '0',
                    material_packaging_order: '0',
                    outbound_fee: '0',
                    storage_fee: '0',
                    shipping_fee_platform_discount: '0',
                    tax: '0',
                    original_total_product_price: '0',
                    material_packaging_fee: '0',
                    packaging_fee: '0',
                },
            ],
        }
    },
    computed: {
        ...mapGetters(['avatar', 'nickname', 'groups_name']),
    },
    created() {
        this.now();
        this.day_change(0);
    },
    methods: {
        // 北京时间
        now() {
            this.us_time = new Date().getTime() - 16 * 3600 * 1000;
            setInterval(() => {
                this.us_time = new Date().getTime() - 16 * 3600 * 1000;
            }, 1000)
            this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            setInterval(() => {
                this.eur_time = new Date().getTime() - 6 * 3600 * 1000;
            }, 1000)
        },
        searchs() {
            this.saleSearch.dateType = -1;
            this.day_changes = 101;
            if(this.saleSearch.datetime == undefined || this.saleSearch.datetime == null || this.saleSearch.datetime == ''){
                this.$message.error('请筛选时间');
                return false;
            }else{
                this.start_time = this.saleSearch.datetime[0]
                this.end_time = this.saleSearch.datetime[1]
            }
            this.handleSkuFind();
        },
        day_change(val) {
            this.saleSearch.datetime = '';
            let start_time2 = new Date();
            if(val == 0){
                this.start_time.setTime(start_time2.getTime() - 16 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() + 9 * 3600 * 1000);
            }else if(val == 1){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 - 16 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 16 * 3600 * 1000);
            }else if(val == 2){
                this.start_time.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 7 - 16 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 16 * 3600 * 1000);
            }else if(val == 3){
                this.start_time.setTime(start_time2.getTime() - 16 * 3600 * 1000);
                this.end_time.setTime(start_time2.getTime() - 16 * 3600 * 1000);
            }
            this.day_changes = val;
            this.handleSkuFind();
        },
        // sku生成回显
        async handleSkuFind() {
            if(this.start_time == undefined || this.end_time == undefined){
                let start_time2 = new Date()
                start_time2.setTime(start_time2.getTime() - 3600 * 1000 * 24 * 1);
                this.start_time = start_time2;
                this.end_time = new Date();
            }
            let start_time = Date.parse(new Date(this.start_time));
            let end_time = Date.parse(new Date(this.end_time));
            start_time = Math.round(start_time)/1000;
            end_time = Math.round(end_time)/1000;
            this.loading = true;
            let response = await this.request.post('/admin/datapanel/dashboard_new', { 
                day_changes : this.day_changes,
                start_time : start_time,
                end_time : end_time
            })
            this.loading = false;
            if(response.code == 1){
                this.shopify_sales = response.data.shopify_sales;
                this.arr_summary = response.data.arr_summary;
                this.post_start_time = response.data.start_time;
                this.post_end_time = response.data.end_time;
            }else{
                this.shopify_sales = [];
                this.arr_summary = [];
                this.post_start_time = '';
                this.post_end_time = '';
            }
        },
        
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '统计';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    if (!isNaN(value)) {
                        return prev + curr;
                    } else {
                        return prev;
                    }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                } else {
                    sums[index] = 'N/A';
                }
            });
            return sums;
        },
        // 表格列背景色
        columnStyle({ row, column, rowIndex, columnIndex }) {
            // if (columnIndex == 0) {
            //     return "background:	#f5f7fa;font-weight: bold;";
            // }else{
            //     return "background:	#ffffff;color:#409eff;font-weight: bold;";
            // }
        },
        // 表格行背景色
        tableRowClassName({ row, rowIndex }) {
            // return "background:	#ffffff;color:#409eff;font-weight: bold;";
        },

        // 编辑
        handleEdit(row) {
            this.handleFind(row.site_id)
        },

        // 编辑回显
        async handleFind(id) {
            let response = await this.request.get(this.api.edit, { params: 
                {
                    post_start_time:this.post_start_time,
                    post_end_time:this.post_end_time,
                    id:id,
                } })
            this.findFormData = this.formatFindData(response.data)
            this.editOpen = true
        },
    },
}
</script>

<style lang="scss" scoped>
.app-container {
    background: #f0f2f5;
    .title-tip {
        color: #909399;
        margin: 0;
        display: block;
    }
    /* 统计卡片 */
    .chart-card {
        color: #606266;
        margin-bottom: 15px;
    }
    .chart-card-num {
        font-size: 30px;
    }

    .chart-card-content {
        height: 50px;
        box-sizing: border-box;
        margin-bottom: 12px;
        font-size: 13px;
    }

    .chart-card-text {
        font-size: 13px;
    }
}
</style>
